/*头部*/
.goodsdetail{height: 100%;overflow-y: auto}
.goodsdetail::after{content: '';display: block;width: 100%;height: 50px}
.bg{background: #f4f4f4}
.bg-white{background: #fff}
.nav{position: fixed;top: 0;left: 0;z-index: 1;height: 50px;line-height: 50px;width: 100%;background: #fff;border-bottom: 1px solid #9c9c9c;display: flex;transform: translateY(-100%);-webkit-transform: translateY(-100%);transition: all 1s ease;-webkit-transition: all 1s ease}

.nav.animation{transform: translateY(0);-webkit-transform: translateY(0);}


.nav a{text-align: center;color: #3e3e3e;text-align: center;flex: 1;}
.nav a span{position: relative;display: inline-block}
.nav a.active span::after{content: '';position: absolute;width: 100%;height: 2px;background: #3e3e3e;z-index: 1;bottom: 8px;left: 0}

/*轮播图*/
.lun {}
.lun img{height: 450px;width: 100%;vertical-align: middle}


.detail{padding: 15px 20px 20px;}
.detail h1{padding: 0px 20px 0 12px;color: #3e3e3e;font-size: 19px;text-align: center;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;text-overflow: -o-ellipsis-lastline;position: relative;}
.detail h1 i{display: inline-block;width: 20px;height: 20px;background: url(../img/icons_5.png);background-size: 400px;background-repeat: no-repeat;background-position: -12px -10px;position: absolute;right: -5px;top: 50%;overflow: unset;margin-top: -10px;}
.detail .prize{color: #cea461;font-size: 20px;text-align: center;padding: 5px 0}
.detail .prize span{vertical-align: middle}
.detail .prize span:nth-of-type(1){margin-right: 10px}
.detail .prize span:nth-of-type(2){font-size: 14px;display: inline-block;padding-left: 43px;position: relative;margin-top: 3px}
.detail .prize span:nth-of-type(2)::before{content: '';background: url("../img/markupPrice.png");background-position: 0 0;background-size: 45px;
background-repeat: no-repeat;position: absolute;width: 45px;height: 16px;top: 50%;margin-top: -8px;left: 0;}

.detail .open-ship{display:block;background: #f9f9f9;border-left: 2px solid #e8380d;display: flex;justify-content: space-between;align-items: center;padding-right: 30px}
.detail .box{padding: 8px 20px}
.detail .open-ship p{}
.detail .open-ship p:nth-of-type(1){color: #cea461;font-size: 16px;}
.detail .open-ship p:nth-of-type(2){color: #3e3e3e;font-size: 12px}
.detail .open-ship span{padding: 3px 8px;display: inline-block;border-left: 1px solid #cea461;color: #cea461;
    position: relative;}
.detail .open-ship span::after{content: '';position: absolute;display: inline-block;width: 20px;height: 19px;background: url(../img/icons_5.png);background-size: 300px;background-repeat: no-repeat;background-position: -34px -6px;right: -21px;}
.detail .range{border-left: 2px solid #e8380d;padding-left: 8px;color: #3e3e3e;font-size: 14px;margin: 20px 0 0 0px;display: block;position: relative}
.detail .range:after{content: '';position: absolute;width: 20px;height: 19px;background: url(../img/icons_5.png);background-size: 300px;background-repeat: no-repeat;background-position: -65px -6px;right: 8px}

.description{padding-left: 20px;margin:10px 0 ;height:50px ;color: #3e3e3e;font-size: 14px;display: flex;justify-content: flex-start;align-items: center;position: relative}
.description:after{content: '';position: absolute;width: 20px;height: 19px;background: url(../img/icons_5.png);background-size: 300px;background-repeat: no-repeat;background-position: -65px -6px;right: 26px}
.description .tip{padding: 2px 4px;background:#ff4001 ;border-radius: 2px;color: #fff;margin-right: 10px}
.goods-desc img{max-width: 100%}

/*底部*/
.footer{height: 50px;background: #fff;display: flex;justify-content: flex-end;position: fixed;bottom: 0;left: 0;width: 100%}
.footer .tab-bar{display: flex;justify-content: center;align-items: stretch;flex: 1;}
.footer .tab-bar a{flex: 1;position: relative;}
.footer .tab-bar a::before{content: '';position: absolute;width: 30px;height: 32px;background: url(../img/tab-bar.png);background-size: 70px;background-repeat: no-repeat;display: inline-block;z-index: 5;left: 50%;top: 50%;margin-top: -16px;margin-left: -15px;}
.footer .tab-bar a:nth-of-type(1)::before{ background-position: -36px -0px;}
.footer .tab-bar a:nth-of-type(2)::before{content: '';position: absolute;width: 30px;height: 32px;background: url(../img/icons_5.png);background-size: 400px;background-repeat: no-repeat;display: inline-block;z-index: 5;left: 50%;top: 50%;margin-top: -16px;margin-left: -15px;background-position: -4px -41px}
.footer .tab-bar a:nth-of-type(3)::before{ background-position: -37px -69px}
.footer .add-shop-car{height: 50px;line-height: 50px;text-align: center;color: #fff;background: #ff4001;font-size: 14px;padding: 0 20px}

/*加入购物车弹出层*/
.shopcar-box .cover{position: fixed;width: 100%;height: 100%;left: 0;top:0;background: rgba(0, 0, 0, 0.6);z-index: 1;display: none;transition: all 1s ease;-webkit-transition:all 1s ease;}
.shopcar-box .content{position: fixed;padding: 16px 16px 50px;z-index: 2;left: 0;bottom: 0;width: 100%;transform: translateY(100%);-webkit-transform: translateY(100%);transition: all 1s ease;-webkit-transition:all 1s ease;}


.shopcar-box.animation .cover{display: block;transition: all 1s ease;-webkit-transition:all 1s ease;}
.shopcar-box.animation .content{transform:translateY(0);-webkit-transform: translateY(0);transition: all 1s ease;-webkit-transition:all 1s ease;}



.shopcar-box .content .cancel{ display: inline-block;position: absolute;right: 6px;top: 2px;width: 24px;height: 24px;background: url(../img/icons_1.png);background-size: 250px;background-repeat: no-repeat;background-position: -175px -75px;z-index: 4;}
.shopcar-box  .content .prize{color: #cea461;font-size: 20px;text-align: right;padding: 5px 12px}
.shopcar-box  .content .prize span{vertical-align: middle}
.shopcar-box  .content .prize span:nth-of-type(1){margin-right: 10px}
.shopcar-box  .content .prize span:nth-of-type(2){font-size: 14px;display: inline-block;padding-left: 43px;position: relative;margin-top: 3px}
.shopcar-box  .content .prize span:nth-of-type(2)::before{content: '';background: url("../img/markupPrice.png");background-position: 0 0;background-size: 45px;
    background-repeat: no-repeat;position: absolute;width: 45px;height: 16px;top: 50%;margin-top: -8px;left: 0;}

.shopcar-box .content .des{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: stretch;margin-bottom: 10px;}
.shopcar-box .content .des a{display: flex;width: 23.5%;border: 1px solid #9c9c9c;background: #f4f4f4;color: #a6906c;font-size: 12px;padding: 2px 4px;text-align: center;margin-top: 8px;justify-content: center;align-items: center;}
.shopcar-box .content .des a.active{color: #fff;background: #ff4001;border-color: #ff4001}
.shopcar-box .content .btn-box{height: 50px;margin-top: 10px;display: flex;justify-content: center;align-items: stretch;border-top: 1px solid #ff4001;position: fixed;width: 100%;left: 0;bottom: 0;}
.shopcar-box .content .btn-box a{flex: 1;font-size: 14px;color: #ff4001;font-size: 14px;display: flex;justify-content: center;align-items: center;}
.shopcar-box .content .btn-box a.active{background: #ff4001;color: #fff}